<template>
  <div>
    <van-nav-bar :title="headerTitle" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <van-address-edit :address-info="addressInfo" :area-list="areaList" show-postal :show-delete="showDelete" show-set-default @save="onSave" @delete="onDelete" :is-saving="saveLoading" style="margin-top: 51px;"/>
  </div>
</template>

<script>
import areaList from '../../../../assets/js/area'
export default {
  name: 'addressList',
  data () {
    return {
      headerTitle: '地址新增',
      areaList,
      saveLoading: false,
      showDelete: false, // 删除按钮显示标志位
      addressInfo: { // 用于详情显示
        id: '',
        name: '',
        tel: '',
        addressDetail: '',
        areaCode: '',
        postalCode: '',
        isDefault: ''
      },
      formData: { // 表单数据
        id: '',
        openId: '',
        receiveName: '',
        receivePhone: '',
        province: '',
        city: '',
        county: '',
        address: '',
        areaCode: '',
        postalCode: '',
        isDefault: ''
      }
    }
  },
  methods: {
    /**
     * 返回上一页
     */
    onClickLeft () {
      this.$router.go(-1)
    },
    /**
     * 收货地址保存
     */
    onSave (item) {
      const self = this
      self.saveLoading = true
      self.formData.id = item.id
      self.formData.openId = self.$store.state.openId
      self.formData.receiveName = item.name
      self.formData.receivePhone = item.tel
      self.formData.province = item.province
      self.formData.city = item.city
      self.formData.county = item.county
      self.formData.areaCode = item.areaCode
      self.formData.address = item.addressDetail
      self.formData.postalCode = item.postalCode
      self.formData.isDefault = item.isDefault
      if (self.formData.id === '') { // 新增收货地址
        self.axios.post('api/shop/addShopUserAddress', self.formData).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('新增成功')
            self.saveLoading = false
            self.onClickLeft()
          } else {
            self.saveLoading = false
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          self.saveLoading = false
          console.log(error)
        })
      } else if (self.formData.id !== '') { // 修改收货地址
        self.axios.post('api/shop/updateShopUserAddress', self.formData).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('修改成功')
            self.saveLoading = false
            self.onClickLeft()
          } else {
            self.saveLoading = false
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          self.saveLoading = false
          console.log(error)
        })
      }
    },
    /**
     * 收货地址删除
     */
    onDelete () {
      const self = this
      self.axios.post('api/shop/deleteShopUserAddress', self.formData).then(resp => {
        if (resp.data.code !== '-1') {
          self.$toast('删除成功')
          self.onClickLeft()
        } else {
          self.saveLoading = false
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        self.saveLoading = false
        console.log(error)
      })
    }
  },
  mounted () {
    const self = this
    let item = self.$route.query
    if (item.id !== null && item.id !== undefined) { // 数据回显
      self.showDelete = true
      this.headerTitle = '地址修改'
      self.formData.id = item.id
      self.addressInfo.id = item.id
      self.addressInfo.name = item.name
      self.addressInfo.tel = item.tel
      self.addressInfo.addressDetail = item.address
      self.addressInfo.areaCode = item.areaCode
      self.addressInfo.postalCode = item.postalCode
      if (item.isDefault === '1') {
        self.addressInfo.isDefault = true
      } else {
        self.addressInfo.isDefault = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}

.van-cell__title {
  text-align: left;
}
</style>
